<?php

/* @var $this yii\web\View */
/* @var $id integer */

/* @var $to_label string */

use yii\helpers\Url;

$this->title = '用户管理';
?>
<div id="app">
</div>
<? $this->beginBlock('otherJs') ?>
<?= $this->render('/jstemplate/validate') ?>
<?= $this->render('/jstemplate/left_drawer') ?>
<?= $this->render('/jstemplate/search_form') ?>
<?= $this->render('/jstemplate/notify') ?>
<script type="text/x-template" id="app-template">
    <v-app>
        <notify></notify>
        <left-drawer ref="left_drawer"></left-drawer>

        <v-main>
            <v-app-bar
                elevation="0"
                color="primary"
                dark
                app
            >
                <v-toolbar-title>用户管理</v-toolbar-title>
                <v-spacer></v-spacer>

                <v-app-bar-nav-icon @click="openDrawer"></v-app-bar-nav-icon>

                <template v-slot:extension>
                    <search-form v-if="filterData != null" :filterData="filterData" @search="search" ref="searchForm">
                    </search-form>
                </template>
            </v-app-bar>
            <v-card :loading="loading">
                <v-breadcrumbs
                    :items="breadcrumbs"
                    large
                ></v-breadcrumbs>
                <v-container>
                    <v-data-iterator
                        :items="desserts"
                        :items-per-page.sync="options.itemsPerPage"
                        :server-items-length="totalDesserts"
                        :loading="loading"
                        hide-default-footer
                        :single-expand="true"
                    >
                        <template v-slot:default="{ items, isExpanded, expand }">
                            <v-container>
                                <v-card class="grey lighten-4 d-none d-sm-flex" flat>
                                    <v-container>
                                        <v-row>
                                            <v-col cols="12" sm="4" md="4">
                                                <div class="text-subtitle-2">个人信息</div>
                                            </v-col>
                                            <v-col cols="12" sm="2" md="2">
                                                <div class="text-subtitle-2">联系方式</div>
                                            </v-col>
                                            <v-col cols="12" sm="2" md="2">
                                                <div class="text-subtitle-2">交易信息</div>
                                            </v-col>
                                            <v-col cols="12" sm="2" md="2">
                                                <div class="text-subtitle-2">操作</div>
                                            </v-col>
                                            <v-col cols="12" sm="2" md="2">
                                                <div class="text-subtitle-2">状态</div>
                                            </v-col>
                                        </v-row>
                                    </v-container>

                                </v-card>

                            </v-container>
                            <v-container v-for="item in items" :key="item.id">
                                <v-card flat outlined>
                                    <v-card-text>
                                        <v-row>
                                            <v-col cols="12" sm="4" md="4">
                                                <v-list-item>
                                                    <v-list-item-avatar>
                                                        <v-img :src="'<?= Url::to('@upload') ?>/'+item.head_pic_url_label"></v-img>
                                                    </v-list-item-avatar>

                                                    <v-list-item-content>
                                                        <v-list-item-title
                                                            v-text="item.nickname"></v-list-item-title>
                                                    </v-list-item-content>
                                                </v-list-item>


                                            </v-col>
                                            <v-col cols="12" sm="2" md="2">
                                                <v-card-text>
                                                    <div class="text-caption">
                                                        手机号：{{ item.phone}}
                                                    </div>
                                                    <div class="text-caption">
                                                        邮箱：{{ item.email}}
                                                    </div>
                                                </v-card-text>


                                            </v-col>
                                            <v-col cols="12" sm="2" md="2">
                                                <v-card-text>
                                                    <div class="text-caption">
                                                        余额:{{ item.balance}}
                                                    </div>
                                                </v-card-text>
                                            </v-col>
                                            <v-col cols="12" sm="2" md="2">
                                                <v-card-actions>
                                                    <v-btn
                                                        color="primary"
                                                        outlined
                                                        small
                                                        :href="'<?= Url::to(['view']) ?>?id=' + item.id"
                                                    >
                                                        查看
                                                    </v-btn>
                                                </v-card-actions>
                                            </v-col>
                                        </v-row>
                                    </v-card-text>
                                    <v-card-actions>
                                        <v-spacer></v-spacer>
                                        <v-btn
                                            color="primary"
                                            text
                                            small
                                            @click="expand(item, !isExpanded(item))"
                                        >
                                            {{ isExpanded(item) ? '收起更多':'查看更多' }}
                                        </v-btn>
                                        <v-btn
                                            icon
                                            @click="expand(item, !isExpanded(item))"
                                        >
                                            <v-icon>{{ isExpanded(item) ? 'mdi-chevron-up' : 'mdi-chevron-down'
                                                }}
                                            </v-icon>
                                        </v-btn>
                                    </v-card-actions>

                                    <v-expand-transition>
                                        <div v-show="isExpanded(item)">
                                            <v-divider></v-divider>

                                            <v-card-subtitle>时间</v-card-subtitle>
                                            <v-card-text>
                                                <div class="text-caption">
                                                    创建时间:{{ item.created_at}}
                                                </div>
                                                <div class="text-caption">
                                                    修改时间:{{ item.updated_at}}
                                                </div>
                                            </v-card-text>
                                        </div>
                                    </v-expand-transition>
                                </v-card>

                            </v-container>

                        </template>
                        <template v-slot:footer>
                            <v-pagination
                                v-model="options.page"
                                :length="lastPage"
                                @input="getDataFromApi"
                                @next="getDataFromApi"
                                @previous="getDataFromApi"
                                circle
                            ></v-pagination>
                        </template>
                    </v-data-iterator>

                </v-container>

            </v-card>

        </v-main>
        <v-snackbar
            v-model="snackbarOpen"
        >
            {{ snackbarText }}

            <template v-slot:action="{ attrs }">
                <v-btn
                    color="blue"
                    text
                    v-bind="attrs"
                    @click="snackbarOpen = false"
                >
                    Close
                </v-btn>
            </template>
        </v-snackbar>
    </v-app>
</script>
<script>
    new Vue({
        el: '#app',
        vuetify: vuetify,
        data: function () {
            return {
                page: 1,
                lastPage: 1,
                loading: false,
                selectId: 0,
                selected: [],
                filterData: null,
                filterResult: null,
                totalDesserts: 0,
                options: {
                    page: 1,
                    sortBy: ['create_time'],
                    sortDesc: [true],
                    itemsPerPage: 5,
                },
                breadcrumbs: [
                    {
                        text: '人员管理',
                        disabled: true,
                        href: 'breadcrumbs_dashboard',
                    },
                    {
                        text: '用户列表',
                        disabled: true,
                        href: 'breadcrumbs_link_1',
                    },
                ],
                desserts: [],
                snackbarOpen: false,
                snackbarText: '',
                excelLoading: false,

            }
        },
        watch: {
            options: {
                handler() {
                    this.getDataFromApi()
                },
                deep: true,
            },
            statusTab: function (newVal, oldVal) {
                this.$refs.searchForm.setField('status', this.searchForm.elements.status.choices_by_array[newVal], true)
            },
        },
        mounted() {
            let vue = this
            http.get("users/configs").then(function (response) {
                vue.filterData = response.data
            })
            this.getDataFromApi()
        },
        computed: {
            theme: function () {
                let theme = this.$vuetify.theme;
                return theme.isDark ? theme.themes.dark : theme.themes.light;
            },
            temporary: function () {
                switch (this.$vuetify.breakpoint.name) {
                    case 'xs':
                        return true
                    case 'sm':
                        return true
                    case 'md':
                        return false
                    case 'lg':
                        return false
                    case 'xl':
                        return false
                }
            }
        },
        methods: {
            search(filter) {
                console.log(filter)

                this.options.page = 1;
                this.filterResult = filter;
                this.getDataFromApi()
            },
            getDeviceIcon(device) {
                switch (device) {
                    case 0:
                        return 'fab fa-safari';
                    case 1:
                        return 'fab fa-android';
                    case 2:
                        return 'fab fa-apple';
                }
            },
            getStatusCount(status) {
                return this.statusCounts.hasOwnProperty(status) ? this.statusCounts[status] : 0;
            },
            getDataFromApi() {
                let vue = this;
                if (vue.loading) {
                    return;
                }

                vue.loading = true

                const {sortBy, sortDesc, page, itemsPerPage} = vue.options

                let params = {
                    page: page,
                    sortBy: sortBy[0],
                    sortDesc: sortDesc[0] ? 1 : 0,
                    'per-page': itemsPerPage,
                    expand: 'admin_info,parent,children'
                };

                if(vue.filterResult){
                    params['filter'] = vue.filterResult
                }

                http.get("users", {
                    params: params,
                    paramsSerializer: function(params) {
                        return Qs.stringify(params, {arrayFormat: 'indices'})
                    },
                }).then(function (response) {
                    if (response.status === 200) {
                        vue.desserts = response.data;
                        vue.totalDesserts = parseInt(response.headers['x-pagination-total-count']);
                        vue.lastPage = parseInt(response.headers['x-pagination-page-count']);
                    }
                    vue.loading = false;
                    console.log(response);
                })
            },
            toggleItem(item) {
                let vue = this;
                http.post("user/toggle", {
                    id: item.id,
                }).then(function (response) {
                    let ret = response.data;
                    if (ret.status === 1) {
                        vue.snackbarText = '修改成功';
                    } else {
                        vue.snackbarText = ret.msg;
                    }
                    vue.snackbarOpen = true;
                    vue.createOpen = false;
                    vue.search();
                })
            },
            openDrawer() {
                this.$refs.left_drawer.toggleLeftDrawerVisible()
            },
        },
        template: '#app-template'
    })
</script>
<? $this->endBlock() ?>
